<style scoped lang="scss">
.el-input{
  width: 200px;
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="用户姓名">
        <el-input v-model="searchParams.searchCondition" placeholder="请输入用户姓名" clearable @clear="getTableList"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchTableList">搜 索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Plus" @click="categoryAdd">添 加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-bind="propsRes.table" style="height: 100%;" v-loading="loading" v-on="tableEvent">
      <el-table-column align="center" show-overflow-tooltip prop="name" min-width="180px" label="用户姓名"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="phone" min-width="150px" label="账号（手机号）"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="isShow" min-width="150px" label="是否展示金额">
        <template #default="scope">
          <el-tag :type="scope.row.isShow === 1 ? 'success' : 'error'" disable-transitions>{{ scope.row.isShow === 1 ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="deliveredQuantity" min-width="150px" label="操作">
        <template #default="scope">
          <el-button link size="medium" type="success" @click="categoryEdit(scope.row.id)">编辑</el-button>
          <el-button link @click="delList" type="danger" size="medium">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <addInternalUser ref="formRef" @ok="getSuccess" @updateList="getTableList"></addInternalUser>
  </div>

</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import addInternalUser from "@/views/user/addInternalUser.vue";
import {postUserGetInternalUser,postUserDeleteInternalUser,postUserGetById} from "@/api/internalUser.js"

const message = inject('message')
const refSearchParams = ref(null)
const formRef = ref(null);
const searchParams = reactive({
  searchCondition: '',
})

const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList, getTableList,detailId } = useTableProps({
  searchParams,
  url: postUserGetInternalUser
})
const categoryAdd = () => {
  formRef.value.getParent("add");
};

const categoryEdit = async (id) => {
  const userState = "edit"
  // formRef.value.getParent({userState,id});
  const res = await postUserGetById({id: id})
  const phone = res.data.phone
  const name = res.data.personName
  const isShow = res.data.isShow
  const password = res.data.password
  formRef.value.getParent({userState,id,phone,name,isShow,password});
}

const delList = async() => {
  try {
    console.log(detailId.value)
    await message.confirmMsg('是否删除该条数据？')
    await postUserDeleteInternalUser({id: detailId.value})
    message.notify('success','删除成功')
    getTableList()
  } catch (error) {
    console.log(error)
  }
}

const getSuccess = () => {
  getTableList();
};

onMounted(() => {
  getTableList()
})

</script>

